<template>
  <div class="wallet">
    <div class="my-header">
      <i class="back" @click="$router.go(-1)"></i>
      <strong>余额</strong>
      <i class="record" @click="$router.push('/wallet/record')">交易记录</i>
    </div>
    <div class="content">
      <div class="card">
        <p>账户余额</p>
        <p class="walletNum">&yen;<span>{{accountInfo.userBalance}}</span></p>
        <p>充值下单更便捷</p>
        <button @click="callService">立即充值 ></button>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    mapGetters
  } from 'vuex'
  import {
    MessageBox
  } from 'mint-ui'
  export default {
    data() {
      return {
      }
    },
    watch: {},
    computed: {
      ...mapGetters([
        'userInfo',
        'accountInfo'
      ])
    },
    methods: {
      callService() { // 联系客服
        MessageBox.confirm('联系客服:021-5058886').then(action => {
          if (action === 'confirm') {
            window.location.href = 'tel://021-5058886'
          }
        }).catch(() => {})
      },
      fetchData() {
        if (!this.userInfo) return
        const params = {
          userId: this.userInfo.id
        }
        // 获取用户详细信息
        if (!this.accountInfo) {
          this.$store.dispatch('GetAccountInfo', params).catch(() => {})
        }
        // // 获取用户详细信息
        // getAccountInfo(params).then(res => {
        //   this.accountInfo = res.data.userInfo
        // }).catch(() => {})
      }
    },
    mounted() {
      this.fetchData()
    }
  }

</script>
<!-- address -->
<style lang="scss" scoped>
  @import '~assets/common/css/mixin.scss';
  .my-header {
    padding: $padding;
    background: #fff;
    @include flexbox(space-between, center, row, nowrap);
    border-bottom: 1px solid #eee;
    .back {
      display: block;
      width: .65rem;
      height: .65rem;
      background: url('~assets/common/images/arrow-left.png') no-repeat;
      background-size: 100%;
    }
    strong {
      margin-left: 25px;
      font-size: 18px;
      font-weight: normal;
      color: #333;
    }
    .record {
      color: $orange;
    }
  }

  .content {
    padding: $padding;
    .card {
      @include flexbox(flex-start,
      flex-start,
      column,
      nowrap);
      padding: $padding 15px;
      overflow: hidden;
      position: relative;
      border-radius: 6px;
      font-size: 12px;
      color: #fff;
      background: -webkit-linear-gradient(top, #FFAF68, #FF6701);
      background: linear-gradient(180deg, #FFAF68, #FF6701);
      box-shadow: 0 2px 5px rgba(255, 98, 98, .4);
      line-height: 0.8rem;
      .walletNum {
        span {
          margin-left: 5px;
          font-size: 26px;
        }
        border-bottom: 1px solid #fff;
      }
      button {
        margin-top: 10px;
        border: 1px solid #fff;
        line-height: 24px;
        padding: 0 0.7rem;
        color: #fff;
        border-radius: 30px;
        box-shadow: 0 0 0;
        background: rgba(0, 0, 0, 0)
      }
    }
  }

</style>
